
// 1.create
// 4大数问题（1.数据超过js能表达的最大精度 2.JSON.parse）
// 如果后端存储id直接使用的是string类型 是不会出现这个问题的
import axios from 'axios'
import store from '@/store'
import router from '@/router'
import { Message } from 'element-ui'
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

// 请求拦截器
// 统一注入token

service.interceptors.request.use(
  config => {
    const token = store.getters.token
    config.headers['Authorization'] = `Bearer ${token}`
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 相应拦截器
// token失效 401监控跳转
service.interceptors.response.use(response => {
  // 每次都需要获取res.data.data.某个键 比较麻烦 统一配置处理直接返回data
  // 因为后台返回的数据都是200 只有success发生了变化 所以判断success是否为true 为false手动new一个报错信息
  const { success, message, data } = response.data
  if (success) {
    return data
  } else {
    return Promise.reject(new Error(message))
  }
},
error => {
  console.log(error.response)
  // 判断错误信息，错误信息状态码为401时 清除vuex的token，浏览器缓存的token
  if (error.response && error.response.status === 401) {
    store.commit('user/removeToken')
    router.push('/login')
  } else {
    Message.error(error.message)
  }
  return Promise.reject(error)
}
)

export default service

// 1 create 方法可以执行多次生成多个实例，多个实例完成独立可以有自己独立的配置
// 2 通过create方法创建的新实例，相当于增强版本的直接导入的axios（增强一些自定义的配置）
// 3 不管是请求拦截器海慧寺响应式拦截器都可以调用多次（use）拦截器会进行一次调用
